<template>
	<view class="content">
		<view v-for="(item,index) in list" :key="index">
			<view class="item">
				<view class="code">
					<text>发票代码 {{item.invoice_sn_code}}</text>
				</view>
				<view class="list status">
					<text class="name">发票状态</text>
					<text>已开票</text>
				</view>
				<view class="list">
					<text class="name">发票号码</text>
					<text>{{item.invoice_number}}</text>
				</view>
				<view class="list">
					<text class="name">开票金额</text>
					<text>{{item.money}}</text>
				</view>
				<view class="list">
					<text class="name">含税金额</text>
					<text>{{item.tax_money}}</text>
				</view>
				<view class="list">
					<text class="name">申请开票日期</text>
					<text>{{item.invoice_time}}</text>
				</view>
				<view class="file" v-for="(url,num) in JSON.parse(item.invoice_url) " v-if="item.invoice_url.indexOf('[')>=0">
					<view class="url">
						{{url}}
					</view>
					<button class="btn" @tap="previewFile(url)">查看发票</button>
				</view>
				<view class="file" v-else>
					<view class="url">
						{{item.invoice_url}}
					</view>
					<button class="btn" @tap="previewFile(url)">查看发票</button>
				</view>
			</view>
		</view>
		
		<!-- <view class="tips">
			<text>温馨提示：</text>
			<text>1.请按照订单金额开具发票</text>
			<text>2、上传时请检查发票金额及信息的准确性</text>
		</view>	 -->
	</view>
</template>

<script setup>
	import{getInvoice} from '../../../network/main.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const list = reactive([])	
	onShow(()=>{
		getList()
	})
	const getList = ()=>{
		getInvoice({}).then(res=>{
			let arr  = res.data.data.sort( function(a, b) {
				return   new Date(b.invoice_time) -  new Date(a.invoice_time)
			})
			Object.assign(list, arr)
		})
	}
	const previewFile = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif
	
		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
</script>

<style lang="scss">
	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}
		.file {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;
		
			.url {
				width: 500rpx;
				font-size: 24rpx;
				color: #f6bf00;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.btn {
				width: 160rpx;
				height: 60rpx;
				font-size: 24rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f6bf00;
				margin: 0;
			}
		}
	}

	.btnbox {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 0 30rpx;
		box-sizing: border-box;
		gap: 30rpx;
		margin: 30rpx 0;

		.btn {
			height: 50rpx;
			width: 160rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #ffc400;
			border-radius: 10rpx;
		}
	}

	.tips {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
	}
</style>